// echarts 图表公共配置
import * as echarts from "../plugins/echarts";

// 皮肤
export const colors = {
  primaryColor: "#1e9fff", // 主色调
  // primaryColor: "#797BEC", // 主色调
  preyColor: "rgb(89,183,255)", // 淡色调
  green: "#00B454",
  yellow: "#F9F871",
  pink: "#ff5a88",
  red: "#FF665E",
  grey: "#666",
  cyan: "#00FA9A",
  orange: "#f39c12", // 橙色
  purple: "#9666FF",
  gold: "#FFD700", // 金色
  rgbColor: (o = 1) => `rgba(30, 159, 255, ${o})`,
  pinkColor: (o = 1) => `rgba(255,90,136, ${o})`,
};
/**
 * @description 提示框
 * @param {formatter}  自定义提示框 formatter 函数
 */
export const setToolTip = (
  type = "line",
  formatter = null,
  trigger = "axis"
) => ({
  trigger,
  // formatter: "{b}:{c}%",
  formatter,
  axisPointer: {
    type,
  },
  show: true,
  backgroundColor: "rgba(0, 0, 0, 0.7)",
  textStyle: {
    color: "#fff",
  },
});

/**
 * @description  配置x轴
 * @param {xData} x轴渲染的数据
 * @param {rotate} x轴文字旋转
 */
export const setxAxis = (xData = [], rotate = 0, type = "category") => [
  {
    type,
    axisTick: {
      alignWithLabel: true,
    },
    data: xData,
    axisLabel: {
      interval: 0,
      rotate,
    },
    axisLine: {
      lineStyle: {
        color: "#9d9d9d",
        width: 1,
      },
    },
  },
];
/**
 * @description  配置Y轴
 */
export const setyAxis = (formatter = null, type = "value") => [
  {
    type,
    yAxisIndex: 0,
    axisLabel: {
      formatter,
      // formatter: '{value}%'
    },
    splitLine: {
      lineStyle: {
        type: "dashed",
      },
    },
  },
];

/**
 * @description 折线图传值
 * @param {data}  数据源
 * @param {type}  渲染的图类型
 * @param {name}  图表的名字
 */
export const setSeries = (data = [], type = "line", name = "") => ({
  name,
  type,
  data,
  smooth: true,
  color: colors.primaryColor,
  yAxisIndex: 0,
  symbol: "circle",
  symbolSize: 8,
  barWidth: "40%",
  itemStyle: {
    barBorderRadius: [1, 1, 0, 0],
  },
  areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: colors.rgbColor(0.3),
      },
      {
        offset: 1,
        color: colors.rgbColor(0.1),
      },
    ]),
  },
});

/**
 * @description  设置间距， 上右下左的顺序
 */
export const setGrid = (top = 20, right = 15, bottom = 30, left = 50) => ({
  top,
  right,
  left,
  bottom,
});
